<mat-card *ngIf="isReturnLoaded">Return #{{return.id}}</mat-card>
<mat-progress-spinner *ngIf="!isReturnLoaded" mode="indeterminate"></mat-progress-spinner>
<div class="content" *ngIf="isReturnLoaded">
  <mat-card>
    <mat-list>
      <mat-list-item>
        Status: {{return.status}}
        <button mat-icon-button *ngIf="return.status == 'ACCEPTED' || return.status == 'IN_PROGRESS'"
                (click)="updateReturnStatus()"><mat-icon>create</mat-icon></button>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        Deadline: {{return.scheduledFor}}
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item>
        Value: {{return.value}} PLN
      </mat-list-item>
    </mat-list>
  </mat-card>

  <mat-expansion-panel>
    <mat-expansion-panel-header [collapsedHeight]="collapsedHeight"
                                [expandedHeight]="expandedHeight">
      <mat-panel-title>Customer information</mat-panel-title>
    </mat-expansion-panel-header>
    <div class="customer-info">
      <mat-icon>face</mat-icon>
      <span class="info">{{return.firstName}} {{return.lastName}}</span>
      <mat-icon>email</mat-icon>
      <span class="info">{{return.email}}</span>
      <mat-icon>call</mat-icon>
      <span class="info">{{return.phoneNumber}}</span>
      <br>
      <mat-icon>location_city</mat-icon>
      <span class="info">{{return.street}} {{return.houseNumber}}, {{return.postalCode}} {{return.city}}</span>
    </div>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header [collapsedHeight]="collapsedHeight"
                                [expandedHeight]="expandedHeight">
      <mat-panel-title>Items</mat-panel-title>
    </mat-expansion-panel-header>
    <mat-list>
      <mat-list-item *ngFor="let deliveryItem of return.deliveryItems">
        {{deliveryItem.item.name}}, price: {{deliveryItem.item.currentPrice}} PLN, quantity: {{deliveryItem.quantity}}
        <mat-divider></mat-divider>
      </mat-list-item>
    </mat-list>
  </mat-expansion-panel>
</div>
